<template>
    <div class="malefemaleRatio-main">
        <div class="malefemaleRatio-header">
            <div class="man">
                <span>男士</span>
                <img src="../images/man.png" alt="" />
            </div>
            <div class="woman">
                <span>女士</span>
                <img src="../images/woman.png" alt="" />
            </div>
        </div>
        <div class="echarts" id="malefemaleRatioChart"></div>
    </div>
</template>

<script setup lang="ts" name="malefemaleRatioChart">
import { ECharts, hookEcharts } from "@/hooks/hookEcharts";

const { echarts } = hookEcharts();

interface ChartProps {
    man: number;
    woman: number;
}

let chart: ECharts;
function initChart(params?: any) {
    const charEle = document.getElementById("malefemaleRatioChart") as HTMLElement;
    chart = echarts.init(charEle) as unknown as ECharts;
    updateChart(params);
    return chart;
}

function updateChart(params?: any) {
    const option = getOption(params);
    chart.setOption(option);
}

function getOption(params: ChartProps) {
    const option: EChartsOption = {
        xAxis: {
            type: "value",
            show: false,
        },
        grid: {
            left: 0,
            top: "30px",
            right: 0,
            bottom: 0,
        },
        yAxis: [
            {
                type: "category",
                position: "left",
                data: ["男生"],
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                axisLabel: {
                    show: false,
                },
            },
            {
                type: "category",
                position: "right",
                data: ["女士"],
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                axisLabel: {
                    show: false,
                    padding: [0, 0, 40, -60],
                    fontSize: 12,
                    lineHeight: 60,
                    color: "rgba(255, 255, 255, 0.9)",
                    formatter: "{value}" + params.woman * 100 + "%",
                    rich: {
                        a: {
                            color: "transparent",
                            lineHeight: 30,
                            fontFamily: "digital",
                            fontSize: 12,
                        },
                    },
                },
            },
        ],

        series: [
            {
                type: "bar",
                barWidth: 20,
                data: [params.man],
                z: 20,
                itemStyle: {
                    borderRadius: 10,
                    color: "#007AFE",
                },
                label: {
                    show: true,
                    color: "#E7E8ED",
                    position: "insideLeft",
                    offset: [0, -20],
                    fontSize: 12,
                    formatter: () => {
                        return `男士 ${params.man * 100}%`;
                    },
                },
            },
            {
                type: "bar",
                barWidth: 20,
                data: [1],
                barGap: "-100%",
                itemStyle: {
                    borderRadius: 10,
                    color: "#FF4B7A",
                },
                label: {
                    show: true,
                    color: "#E7E8ED",
                    position: "insideRight",
                    offset: [0, -20],
                    fontSize: 12,
                    formatter: () => {
                        return `女士 ${params.woman * 100}%`;
                    },
                },
            },
        ],
    };
    return option;
}

defineExpose({
    initChart,
    updateChart,
});
</script>

<style scoped lang="less">
.malefemaleRatio-main {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 40px 65px;

    .malefemaleRatio-header {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 115px;

        .man,
        .woman {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 110px;
            height: 115px;
            background: url("../images/man-bg.png") no-repeat;
            background-size: 100% 100%;

            img {
                width: 60px;
                height: 60px;
                margin-top: 20px;
            }

            span {
                margin-top: 2px;
                font-size: 13px;
                color: #ffffff;
            }
        }

        .woman {
            background: url("../images/woman-bg.png") no-repeat;
        }
    }

    .echarts {
        width: 100%;
        height: calc(100% - 115px);
    }
}
</style>
